<template>
	<view class="container">
		<view class="register-wrapper">
			<view class="topImg">
				<!-- <image style="width:100%;height:100%;" src="@/static/img/loginbg.png" mode="scaleToFill"></image> -->
				<image class="logo-img" src="@/static/img/loginlogo.png" mode="scaleToFill"></image>
			</view>
			<view class="fillContent">
				<view class="contFrom">
					<view class="contFormLabel">会员码</view>
					<view class="cell row">
						<input placeholder-style="color:#ccc" class="input" type="text" v-model="info.agencyId" placeholder="请输入您的会员码" />
					</view>
					<view class="contFormLabel">姓名</view>
					<view class="cell row">
						<input placeholder-style="color:#ccc" class="input" type="text" maxlength="20" v-model="info.userName"
						 placeholder="请输入您的真实姓名" />
					</view>
					<view class="contFormLabel">密码</view>
					<view class="cell row ">
						<input placeholder-style="color:#ccc" class="input" type="text" maxlength="18" v-model="info.password" v-if="passwordFlg"
						 @blur="passwordNoFun" placeholder="请输入您的密码" />
						<input placeholder-style="color:#ccc" class="input" type="password" maxlength="18" v-model="info.password" v-else
						 @blur="passwordNoFun" placeholder="请输入您的密码" />
						<text @tap="passwordFun()" class="mima iconfont " :class="passwordFlg?'iconmimakejian':'iconyincangmima'"></text>
					</view>
					<view class="contFormLabel">确认密码</view>
					<view class="cell row">
						<input placeholder-style="color:#ccc" class="input" type="text" maxlength="18" v-if="passwordReFlg" @blur="passwordNoFun"
						 v-model="info.passwordRe" placeholder="请再次输入密码" />
						<input placeholder-style="color:#ccc" class="input" type="password" maxlength="18" v-else @blur="passwordNoFun"
						 v-model="info.passwordRe" placeholder="请再次输入密码" />
						<text @tap="passwordReFun()" class="mima iconfont" :class="passwordReFlg?'iconmimakejian':'iconyincangmima'"></text>
					</view>
					<view class="register-bottom">
						<!-- <view ref="confirmBtn" @tap="submit" class="row btnRegister">
							立即注册
						</view> -->
						<!-- #ifdef MP-WEIXIN -->
						<button class="row btnRegister" :disabled="onClickFlg" v-if="!info.agencyId||!info.userName||!info.password||!info.passwordRe||!passwordNo"
						 @tap="wechatLogin">
							立即注册
						</button>
						<template v-else>
							<button v-if="canIUseGetUserProfile" @tap="getUserProfile" class="row btnRegister" :disabled="onClickFlg" hover-class="btn-hover">
								立即注册
							</button>
							<button v-else class="row btnRegister" :disabled="onClickFlg" hover-class="btn-hover" open-type="getUserInfo" @getuserinfo="wechatLogin">
								立即注册
							</button>
						</template>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<button class="row btnRegister" :disabled="onClickFlg" hover-class="btn-hover" @tap="wechatLogin">
							立即注册
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="row btnRegister" :disabled="onClickFlg" hover-class="btn-hover" @tap="h5Login">
							立即注册
						</button>
						<!-- #endif -->
						<view class="alreadyRegister" @tap="gologin">
							您已注册?<text class="gologin">去登陆>></text>
						</view>
					</view>

				</view>
			</view>

		</view>
		<!-- <view class="bot-btn-wrap fix-bot">
			<mix-button text="下一步" icon="icon-jia2" :iconSize="36" :isConfirm="false" @onConfirm="ceshi()"></mix-button>
		</view> -->
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					agencyId: '',
					userName: '',
					password: '',
					passwordRe: '',
				},
				passwordFlg: false,
				passwordReFlg: false,
				onClickFlg: false,
				passwordNo: false,
				canIUseGetUserProfile: false,
			}
		},
		onLoad(){
			// #ifdef MP-WEIXIN
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true;
			}
			// #endif
			// #ifdef H5
		    this.$wechat.noShare();
			this.h5LoginLoad();
			// #endif
		},
		methods: {
			// #ifdef H5
			h5LoginLoad() {
				let code = this.$util.getUrlCode('code');
				if (code) {
					const registerInfo = uni.getStorageSync('registerInfo');
					uni.removeStorageSync('registerInfo');
					if(registerInfo) {
					   uni.removeStorageSync('registerInfo');
					   this.info = JSON.parse(registerInfo);
					   const params = {
					   	code: code,
					   };
					   console.log(params)
					   this.submit(params);
					}
				} 
			},
			h5Login() {
				const data = this.info;
				if (!data.agencyId) {
					this.$util.msg('请输入您的会员码');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.userName) {
					this.$util.msg('请输入您的真实姓名');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.password) {
					this.$util.msg('请输入您的密码');
					// this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(data.password, 'pwd')) {
					this.$util.msg('密码长度在6~18之间，并由数字、字母组成');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.passwordRe) {
					this.$util.msg('请再次输入密码');
					// this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(data.passwordRe, 'pwd')) {
					this.$util.msg('密码长度在6~18之间，并由数字、字母组成');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (data.passwordRe != data.password) {
					this.$util.msg('两次密码输入不一致');
					// this.$refs.confirmBtn.stop();
					return;
				}
				uni.setStorageSync('registerInfo', JSON.stringify(this.info));
				//跳转微信获取code
				this.$wechat.wxh5Login('snsapi_userinfo', 'packageA/pages/register/register');
			},
			// #endif
			gologin() {
				if (this.$util.getToken()) {
					this.$util.setToken('');
				}
				uni.reLaunch({
					url: '/pages/home/login'
				})
			},
			passwordFun() {
				this.passwordFlg = !this.passwordFlg
			},
			passwordReFun() {
				this.passwordReFlg = !this.passwordReFlg
			},
			passwordNoFun() {
				const data = this.info;
				if (!this.$util.checkStr(data.passwordRe, 'pwd')){
					this.passwordNo = false
				}else if (!this.$util.checkStr(data.password, 'pwd')){
					this.passwordNo = false
				}else if (data.passwordRe != data.password) {
					this.passwordNo = false
				} else {
					this.passwordNo = true
				}

			},
			// #ifdef MP-WEIXIN
			getUserProfile(e) {
				if (this.onClickFlg) {
					return;
				}
				const data = this.info;
				if (!data.agencyId) {
					this.$util.msg('请输入您的会员码');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.userName) {
					this.$util.msg('请输入您的真实姓名');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.password) {
					this.$util.msg('请输入您的密码');
					// this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(data.password, 'pwd')) {
					this.$util.msg('密码长度在6~18之间，并由数字、字母组成');
					this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.passwordRe) {
					this.$util.msg('请再次输入密码');
					// this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(data.passwordRe, 'pwd')) {
					this.$util.msg('密码长度在6~18之间，并由数字、字母组成');
					this.$refs.confirmBtn.stop();
					return;
				}
				if (data.passwordRe != data.password) {
					this.$util.msg('两次密码输入不一致');
					// this.$refs.confirmBtn.stop();
					return;
				}
				const that = this;
			    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
			    wx.getUserProfile({
			      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			      success: (info) => {
					  uni.login({
					  	provider: 'weixin',
					  	success: function(loginRes) {
							const params = {
								code: loginRes.code,
								iv: 'mp',
								encryptedData: 'mp',
								nickName: info.userInfo.nickName,
								avatarUrl: info.userInfo.avatarUrl
							};
							console.log(params)
							that.submit(params);

					  	},
					  	fail: function(res) {
							that.onClickFlg=false;
						}
					  })
			      },
				  fail: function(res) {
				  	that.onClickFlg=false;
				  }
			    })
			},
			
			// #endif
			wechatLogin() {
				if (this.onClickFlg) {
					return;
				}
				const data = this.info;
				if (!data.agencyId) {
					this.$util.msg('请输入您的会员码');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.userName) {
					this.$util.msg('请输入您的真实姓名');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.password) {
					this.$util.msg('请输入您的密码');
					// this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(data.password, 'pwd')) {
					this.$util.msg('密码长度在6~18之间，并由数字、字母组成');
					this.$refs.confirmBtn.stop();
					return;
				}
				if (!data.passwordRe) {
					this.$util.msg('请再次输入密码');
					// this.$refs.confirmBtn.stop();
					return;
				}else if (!this.$util.checkStr(data.passwordRe, 'pwd')) {
					this.$util.msg('密码长度在6~18之间，并由数字、字母组成');
					this.$refs.confirmBtn.stop();
					return;
				}
				if (data.passwordRe != data.password) {
					this.$util.msg('两次密码输入不一致');
					// this.$refs.confirmBtn.stop();
					return;
				}
				const that = this
				// 获取用户名  获取性别 获取头像 获取js_code去换取后台返回的openID
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(info) {
								//判断是否授权
								uni.getSetting({
									success(res) {
										console.log(res.authSetting['scope.userInfo'])
										// 未授权
										if (!res.authSetting['scope.userInfo']) {

											uni.getProvider({
												service: 'oauth',
												success: function(res) {
													if (~res.provider.indexOf('weixin')) {
														const params = {
															code: loginRes.code,
															iv: info.iv,
															encryptedData: info.encryptedData,
															nickName: info.userInfo.nickName,
															avatarUrl: info.userInfo.avatarUrl,
															
														};
														console.log(params)
														that.submit(params);
													} else {
														uni.showToast({
															title: '请先安装微信或升级版本',
															icon: "none"
														});
													}
												}
											});
										} else {
											const params = {
												code: loginRes.code,
												iv: info.iv,
												encryptedData: info.encryptedData,
												nickName: info.userInfo.nickName,
												avatarUrl: info.userInfo.avatarUrl
											};
											console.log(params)
											that.submit(params);

										}
									}
								})
							},
							fail: function(res) {}
						})
					},
					fail: function(res) {}
				})
				//#endif

				// #ifdef APP-PLUS
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									// 获取用户信息
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => {
											const params = {
												unionId: loginRes.authResult.unionid,
												nickName: info.userInfo.nickName,
												avatarUrl: info.userInfo.avatarUrl,
												appOpenId: loginRes.authResult.openid
											};
											console.log(loginRes)
											that.submit(params);
										},
										fail: () => {
											uni.showToast({
												title: "微信登录授权失败",
												icon: "none"
											});
										}
									})
								}
							});
						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
				//#endif
			},
			// ceshi(){
			// 	uni.reLaunch({
			// 		url: '/pages/home/login'
			// 	})
			// 	let userData={
			// 		agencyId:this.info.agencyId,
			// 		password:this.info.password
			// 	}
			// 	uni.setStorageSync('userData', userData);
			// },
			submit(params) {
				this.onClickFlg = true
				const obj = Object.assign(params, this.info)
				console.log(obj)
				this.$http.registerInfo(obj).then((res) => {
					if (res.status === 0) {
						uni.showToast({
							title: "注册成功!",
							icon: "none",
							duration: 500
						});
						setTimeout(() =>{
							uni.reLaunch({
								url: '/pages/home/login'
							})
							let userData={
								agencyId:this.info.agencyId,
								password:this.info.password
							}
							uni.setStorageSync('userData', userData);
							this.onClickFlg = false
						},1000)
						
						this.$util.setToken('');
					}else{
						//uni.clearStorageSync('userData')
						this.onClickFlg = false
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100vh;
		background-color: #fff;

		.register-wrapper {
			width: 100%;
			height: 100%;

			.topImg {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 50rpx;

				.logo-img {
					width: 280rpx;
					height: 280rpx;
				}
			}

			.fillContent {
				padding: 0 32rpx;

				.contFrom {
					display: flex;
					flex-direction: column;
					padding: 0 16rpx;
					background-color: #fff;
					width: 100%;

					.contFormLabel {
						color: #999999;
						font-size: 32rpx;
					}

					.cell {
						margin: 16rpx 0;
						padding: 20rpx 16rpx;
						box-shadow: 0rpx 12rpx 24rpx 0rpx #EBECF2;
						border-radius: 16rpx;

						.tit {
							width: 55rpx;
							font-size: 36rpx;
							color: #7d7d7d;
							margin-left: 20rpx;
							border-right: 4rpx solid #7d7d7d;
						}

						.input {
							flex: 1;
							font-size: 28rpx;
							color: #111111;
							padding-left: 20rpx;
							border: none;
							outline: none;
						}

						.icon-you {
							flex-shrink: 0;
							margin-right: 8rpx;
							margin-left: 40rpx;
							font-size: 24rpx;
							color: #aaa;
						}

						.mima {
							color: #111111;
							width: 55rpx;
							font-size: 36rpx;
							text-align: center;
						}

						switch {
							transform: scale(0.8) translateX(10rpx);
							transform-origin: center right;
						}
					}
				}

				.register-bottom {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}

				.btnRegister {
					margin-top: 50rpx;
					font-size: 38rpx;
					text-align: center;
					height: 100rpx;
					display: flex;
					justify-content: center;
					color: #fff;
					background: -webkit-linear-gradient(299deg, #F69E97 0%, #EA655E 100%);
					background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
					box-shadow: 0px 4rpx 40rpx 0px rgba(83, 0, 0, 0.24);
					border-radius: 50rpx;
				}

				.alreadyRegister {
					margin-top: 30rpx;
					text-align: center;
					font-size: 24rpx;
					color: #ccc;

					.gologin {
						color: #EA655E;
						margin-left: 10rpx;
					}
				}

			}
		}
	}
</style>
